<template>
  <view>
    <u-navbar title="互动消息" auto-back fixed placeholder></u-navbar>
    <view class="content">
      <z-paging ref="paging" fixed use-safe-area-placeholder refresher-vibrate refresher-only
			@query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time
			style="top: calc(44px + var(--status-bar-height));" @scroll="onScroll">
        <u-gap height="10px" bg-color="#f5f5f5"></u-gap>
        <u-cell isLink v-for="(item, index) in dataList" :key="index" :border="false" @click="goDetail(item)">
          <template slot="icon">
            <u-avatar :src="fileUrl + item.avatar" style="margin-right: 10px;" @click="goUserInfo(item)"></u-avatar>
          </template>
          <template slot="title">
            <text style="font-weight: bold;letter-spacing: 2px;font-size: 14px;">{{ item.nickname }}</text>
          </template>
          <template slot="label">
            <text class="message">{{ item.label }}</text>
          </template>
        </u-cell>
        <u-loadmore :status="loadMore" :marginTop="20" :marginBottom="20"></u-loadmore>
      </z-paging>
    </view>
  </view>
</template>

<script>
import mixin from '@/mixin'
import {
  messageList,
  changeReadStatus
} from '@/api/message'
export default {
  components: {},
  data() {
    return {

    }
  },
  mixins: [mixin],
  computed: {},
  created() {
    this.getDataList(true)
    changeReadStatus(this.$store.getters.id)
  },
  methods: {
    getDataList(isRefresh) {
      const params = {}
      params.size = 20
      params.current = this.current
      params.uid = this.$store.getters.id
      messageList(params).then(res => {
        this.$refs.paging.complete()
        const { code, data } = res
        if(code === 200) {
          this.total = data.total
          if(isRefresh) {
            this.dataList = []
          }
          data.list.forEach(item => {
            if(item.type == '0') {
              item.label = '关注了你'
            }else if(item.type == '1') {
              item.label = '点赞了你的帖子'
            }else if(item.type == '2') {
              item.label = '评论了你的帖子'
            }
            this.dataList.push(item)
          })
        }
      }).catch(() => {
        this.$refs.paging.complete()
      })
    },
    goUserInfo(item) {
      uni.navigateTo({
        url: `/pages/tab2/person/index?uid=${item.user_id}`
      })
    },
    goDetail(item) {
      if(item.type == '0') {
        uni.navigateTo({
          url: `/pages/tab2/person/index?uid=${item.user_id}`
        })
      }else {
        uni.navigateTo({
          url: `/pages/tab2/detail/index?id=${item.fid}`
        })
      }
    }
  },

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
} 
</script>

<style lang="scss" scoped>
.message {
  color: #888888;
  font-size: 12px;
}
</style>